/*
 * @Author: mayijun
 * @Date: 2022-05-13 10:21:47
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-06 14:45:02
 */
//枚举值页签
import { defineComponent, reactive, onMounted, ref, computed } from 'vue';
import SearchForm from '@/components/SearchForm/index';
import Table from '@/components/Table/index';
import Edit from './edit';
import './index.scss';
import API from '@/services';

const EnumSettings = defineComponent({
  name: 'EnumSettings',
  setup: (props, { slots, attrs, emit }) => {
    /* list */
    const systemList = reactive({
      list: [],
      total: 0,
      pageNum: 1,
      pageSize: 10
    });

    /* 表单 */
    const form = reactive({
      cnName: ''
    });

    /* form实例 */
    const formRef: any = ref();

    /* table loading */
    const TableLoading = ref(false);

    const rowDetail = ref({});

    const drawerVisible = ref(false);

    const tableColumn = reactive([
      {
        label: '下拉项名称',
        width: '120',
        prop: 'cnName'
      },
      {
        prop: 'description',
        label: '描述'
      },
      {
        prop: 'num',
        label: '枚举值个数'
      },
      {
        prop: 'createBy',
        label: '创建人'
      },
      {
        prop: 'createTime',
        label: '创建时间'
      },
      {
        prop: 'updateBy',
        label: '最近更新人'
      },
      {
        prop: 'updateTime',
        label: '最近更新时间'
      },
      {
        label: '操作',
        width:60,
        default: ({ row }: any) => {
          return (
            <el-button type="text" onClick={() => edit(row)}>
              编辑
            </el-button>
          );
        }
      }
    ]);

    /* 编辑 */
    const edit = (row: any) => {
      drawerVisible.value = true;
      rowDetail.value = row;
    };

    /* 列表 */
    const getSystemList = async () => {
      try {
        TableLoading.value = true;
        const { code, data }: any =
          await API.dictionaryConfig.getDictionaryConfig({
            pageNum: systemList.pageNum,
            pageSize: systemList.pageSize,
            ...form
          });
        if (code === 200 && Array.isArray(data?.list)) {
          systemList.list = data?.list;
          systemList.total = +data?.total;
        }
      } catch (error) {
        console.log(error);
      } finally {
        TableLoading.value = false;
      }
    };
    onMounted(() => getSystemList());
    return () => {
      return (
        <div class="configCenter_container">
          <SearchForm
            num={2}
            isSearchBtn={false}
            onSearch={() => getSystemList()}
            onReset={() => {
              formRef.value.resetFields();
              getSystemList();
            }}
            onSubmit-prevent={() => {
              return false;
            }}
            model={form}
            formRef={formRef}
          >
            <el-form-item label="名称:" prop="cnName" label-width={50}>
              <el-input
                size="large"
                style={{width:'210px'}}
                onChange={() => getSystemList()}
                v-model={form.cnName}
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
          </SearchForm>

          <Table
            height="calc(100vh - 318px)"
            v-loading={TableLoading.value}
            data={systemList.list}
            column={tableColumn}
            onPageCurrentChange={(page: number) => {
              systemList.pageNum = page;
              getSystemList();
            }}
            onPageSizeChange={(size: number) => {
              systemList.pageNum = 1;
              systemList.pageSize = size;
              getSystemList();
            }}
            pagination={{
              total: systemList.total,
              currentPage: systemList.pageNum,
              pageSize: systemList.pageSize
            }}
          />
          <el-drawer
            size="50%"
            v-model={drawerVisible.value}
            destroy-on-close={true}
            close-on-click-modal={false}
            append-to-body={true}
            title="编辑"
            custom-class="system-drawer"
          >
            <Edit
              v-model={[drawerVisible.value, 'drawerVisible']}
              onRefresh={() => {
                drawerVisible.value = false;
                getSystemList();
              }}
              editInfo={rowDetail.value}
            />
          </el-drawer>
        </div>
      );
    };
  }
});

export default EnumSettings;
